<style>
    .basicinfo {
        margin: 15px 0;
    }

    .basicinfo .row > .col-xs-4 {
        padding-right: 0;
    }

    .basicinfo .row > div {
        margin: 5px 0;
    }

    .meber_title span {
        color: orange;
        font-size: 15px;
    }

    .meber_title p {
        color: white;
        font-size: 15px;
    }

    .title {
        min-height: 230px;
        background-color: white;
        box-shadow: 5px 6px 12px #0C0C0C;
        border-radius: 12px;
        font-size: 16px;
    }

    .title p {
        font-size: 14px;
        font-family: 微软雅黑;
    }

    .title_content {
        min-height: 500px;
        background-color: white;
        box-shadow: 7px 7px 13px #0C0C0C;
        border-radius: 15px;
        margin-top: 10px;
    }

    .nav {
        font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-weight: 400;
    }

    .tab-c {
        width: 100%;
        height: 100%;
        padding: 30px 150px;
    }

    main.content {
        background-image: url("/assets/images/Member_center/user_1.png");
        position: static;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: center;
        font-family: "Microsoft JhengHei";
        padding-top: 30px;
        background-attachment: fixed;
    }

    .line {
        height: 5px;
        width: 100%;
        background-color: #E2E2E2;
        margin-top: 30px;
        margin-bottom: 30px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
    }

    .cz {
        width: 60px;
        height: 21px;

        border-radius: 5px;
        background-color: #4E6DCA;
        display: inline-block;
        text-align: center;
        color: white;
        margin-right: 15px;
        cursor: pointer;
        transition: all 1s linear;
    }

    .cz:hover {
        font-size: 15px;

        background-color: #46c37b;
    }

    .tab-content {
        font-size: 14px;
    }

    .img-xiaofei {
        box-shadow: 3px 3px 6px #0C0C0C;
        width: 70px;
        height: 70px;
        border-radius: 5px;
        cursor: pointer;
        margin-top: 15px;
    }

    body {
        padding-top: 0px;
    }

    .modal-dialog {

        width: 600px;
        margin: 100px auto;

    }
</style>


<div>
    <div class="container" style="margin-bottom: 20px">
        <div class="row">
            <div class="col-lg-3 col-xs-3 col-md-3 text-center">
                <div class="meber_title">
                    <span><strong>ID</strong></span>
                    <p><strong>{$result.id}</strong></p>
                </div>
            </div>
            <div class="col-lg-3 col-xs-3 col-md-3 text-center">
                <div class="meber_title">
                    <span><strong>等级</strong></span>
                    <p><strong>{$result.level}</strong></p>
                </div>

            </div>
            <div class="col-lg-3 col-xs-3 col-md-3 text-center">
                <div class="meber_title">
                    <span><strong>积分</strong></span>
                    <p><strong>{$result.score}</strong></p>
                </div>

            </div>
            <div class="col-lg-3 col-xs-3 col-md-3 text-center">
                <div class="meber_title">
                    <span><strong>余额</strong></span>
                    <p><strong>{$result.banlance}</strong></p>
                </div>

            </div>
        </div>
    </div>


    <div class="container title">
        <div class="row">
            <div class="col-lg-4 col-xs-4 col-md-4 col-lg-offset-4  col-xs-offset-4 col-md-offset-4 text-center"
                 style="position: relative;padding-top: 40px">
                <img src="/assets/images/Member_center/headicon03.png" alt="头像" class="img-circle"
                     style="width: 80px;height: 80px;position: absolute;top: -30px;left: 50%;transform: translateX(-50%)">
                <h2 style="font-family: 宋体">{$result.username}</h2>
                <p style="max-width: 150px; text-overflow: ellipsis;overflow: hidden;white-space: nowrap;margin: 8px auto">
                    {$result.bio}
                </p>
                <button class="btn btn-info" data-toggle="modal" data-target="#myModal"
                        style="font-family: 'Malgun Gothic'">编辑资料

                    <i class="fas fa-edit"></i>
                </button>
            </div>
        </div>
        <div class="row" style="margin-top: 20px;">
            <div class="col-lg-6 col-xs-6 col-md-6 col-lg-offset-3 col-md-offset-3 col-xs-offset-3">
                <ul class="nav nav-pills nav-justified">
                    <li class="active"><a href="#tab1" data-toggle="tab">个人资料</a></li>
                    <li><a href="#tab2" data-toggle="pill">用户绑定</a></li>
                    <li><a href="#tab3" data-toggle="pill">消费记录</a></li>

                </ul>

            </div>

        </div>
    </div>

    <div class="container ">
        <div class="row">
            <div class="col-lg-12 col-xs-12 col-md-12 title_content">
                <div class="tab-content ">

                    <div class="tab-pane active tab-c " id="tab1">
                         
                        <div class="table-responsive">
                             
                            <table class="table  table-hover">
                                <thead>
                                <tr>
                                    <th colspan="3"><strong>基本信息</strong></th>

                                </tr>

                                </thead>
                                <tbody>

                                <tr>
                                    <td>用户名</td>

                                    <td>{$result.username}</td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>出生日期</td>
                                    <td>{$result.birthday}</td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>性别</td>
                                    <td>{$result.gender}</td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>签名</td>
                                    <td>{$result.bio}</td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>会员等级</td>
                                    <td>{$result.level}</td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>积分</td>
                                    <td>{$result.score}</td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>余额</td>
                                    <td>{$result.banlance}</td>
                                    <td class="text-right"><span class="cz ">充值</span></td>
                                </tr>
                                <tr>
                                    <td>家乡</td>
                                    <td>{$result.birthday}</td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>现居</td>
                                    <td>{$result.birthday}</td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>注册时间</td>
                                    <td>{$result.createtime}</td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>简介</td>
                                    <td>{$result.birthday}</td>
                                    <td></td>
                                </tr>
                                </tbody>
                            </table>

                            <div class="line"></div>
                            <table class="table table-hover">
                                <thead>
                                <tr>
                                    <th><strong>联系方式</strong></th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td><img class="img-circle" style="margin-right: 10px" alt="QQ" src="/assets/images/Member_center/QQ.png"/>QQ
                                    </td>
                                    <td >12354789</td>
                                </tr>
                                <tr>
                                    <td><img class="img-circle" style="margin-right: 10px" alt="QQ" src="/assets/images/Member_center/微信.png"/>微信
                                    </td>
                                    <td>cdshs_s122</td>
                                </tr>
                                <tr>
                                    <td><img class="img-circle" style="margin-right: 10px"  alt="QQ" src="/assets/images/Member_center/电话.png"/>手机号
                                    </td>
                                    <td>{$result.mobile}</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                         
                           
                    </div>
                       
                    <div class="tab-pane tab-c" id="tab2">
                        <div class="table-responsive">
                              
                            <table class="table table-hover">
                                <thead>
                                <tr>
                                    <th colspan="3">
                                        <strong>账号安全</strong>
                                    </th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>用户名</td>

                                    <td>{$result.username}</td>

                                </tr>
                                <tr>
                                    <td>邮箱账号</td>
                                    <td>{$result.email}</td>
                                    <td><span class="cz">修改</span></td>
                                </tr>
                                <tr>
                                    <td>手机账号</td>
                                    <td>{$result.mobile}</td>
                                    <td><span class="cz">解绑</span><span class="cz">更换</span></td>
                                </tr>
                                <tr>
                                    <td>登录密码</td>
                                    <td></td>
                                    <td><span class="cz">修改</span></td>
                                </tr>
                                </tbody>
                            </table>

                            <div class="line"></div>
                            <table class="table table-hover">
                                <thead>
                                <tr>
                                    <th colspan="3"><strong>第三方账号绑定</strong></th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td><img class="img-circle" style="margin-right: 10px" alt="QQ" src="/assets/images/Member_center/QQ.png"/>QQ
                                    </td>
                                    <td>{$result.username}</td>
                                    <td><span class="cz">解绑</span></td>
                                </tr>
                                <tr>
                                    <td><img class="img-circle" style="margin-right: 10px" alt="QQ" src="/assets/images/Member_center/微信.png"/>微信
                                    </td>
                                    <td>未绑定</td>
                                    <td><span class="cz">绑定</span></td>
                                </tr>
                                <tr>
                                    <td><img class="img-circle" style="margin-right: 10px" alt="QQ" src="/assets/images/Member_center/电话.png"/>手机号
                                    </td>
                                    <td>{$result.mobile}</td>
                                    <td><span class="cz">绑定</span></td>
                                </tr>
                                </tbody>
                            </table>

                        </div>
                           
                           
                    </div>
                       
                    <div class="tab-pane tab-c" id="tab3">
                             
                        <div class="table-responsive">
                              
                            <table class="table table-hover">
                                <tbody>
                                <tr>
                                    <td>
                                        <div class="img-xiaofei">
                                            <img class="img-rounded center-block img-responsive"
                                                 src="/assets/images/Member_center/xiaofei.png"/>
                                        </div>
                                    </td>
                                    <td>
                                        <p>订单编号：<strong>HT20181116184</strong></p>
                                        <p>2018-11-16 &nbsp;&nbsp;18:24:00</p>
                                        <p>劳力士保养</p>
                                        <p>￥<span>2000.00</span> &nbsp;&nbsp;<span>x1</span></p>
                                    </td>
                                    <td>
                                        <p style="margin-bottom: 55px"><span class="cz">已成功</span></p>
                                        <p>共计
                                            <spa>1</spa>
                                            件商品&nbsp;&nbsp;合计:￥<span>1800</span></p>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="img-xiaofei">
                                            <img class="img-rounded center-block img-responsive"
                                                 src="/assets/images/Member_center/xiaofei.png"/>
                                        </div>
                                    </td>
                                    <td>
                                        <p>订单编号：<strong>HT20181116184</strong></p>
                                        <p>2018-11-16 &nbsp;&nbsp;18:24:00</p>
                                        <p>劳力士保养</p>
                                        <p>￥<span>2000.00</span> &nbsp;&nbsp;<span>x1</span></p>
                                    </td>
                                    <td>
                                        <p style="margin-bottom: 55px"><span class="cz">已成功</span></p>
                                        <p>共计
                                            <spa>1</spa>
                                            件商品&nbsp;&nbsp;合计:￥<span>1800</span></p>
                                    </td>
                                </tr>

                                <tr>
                                    <td>
                                        <div class="img-xiaofei">
                                            <img class="img-rounded center-block img-responsive"
                                                 src="/assets/images/Member_center/xiaofei.png"/>
                                        </div>
                                    </td>
                                    <td>
                                        <p>订单编号：<strong>HT20181116184</strong></p>
                                        <p>2018-11-16 &nbsp;&nbsp;18:24:00</p>
                                        <p>劳力士保养</p>
                                        <p>￥<span>2000.00</span> &nbsp;&nbsp;<span>x1</span></p>
                                    </td>
                                    <td>
                                        <p style="margin-bottom: 55px"><span class="cz">已成功</span></p>
                                        <p>共计
                                            <spa>1</spa>
                                            件商品&nbsp;&nbsp;合计:￥<span>1800</span></p>
                                    </td>

                                <tr>

                                    <td>
                                        <div class="img-xiaofei">
                                            <img class="img-rounded center-block img-responsive"
                                                 src="/assets/images/Member_center/xiaofei.png"/>
                                        </div>
                                    </td>
                                    <td>
                                        <p>订单编号：<strong>HT20181116184</strong></p>
                                        <p>2018-11-16 &nbsp;&nbsp;18:24:00</p>
                                        <p>劳力士保养</p>
                                        <p>￥<span>2000.00</span> &nbsp;&nbsp;<span>x1</span></p>
                                    </td>
                                    <td>
                                        <p style="margin-bottom: 55px"><span class="cz">已成功</span></p>
                                        <p>共计
                                            <spa>1</spa>
                                            件商品&nbsp;&nbsp;合计:￥<span>1800</span></p>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="img-xiaofei">
                                            <img class="img-rounded center-block img-responsive"
                                                 src="/assets/images/Member_center/xiaofei.png"/>
                                        </div>
                                    </td>
                                    <td>
                                        <p>订单编号：<strong>HT20181116184</strong></p>
                                        <p>2018-11-16 &nbsp;&nbsp;18:24:00</p>
                                        <p>劳力士保养</p>
                                        <p>￥<span>2000.00</span> &nbsp;&nbsp;<span>x1</span></p>
                                    </td>
                                    <td>
                                        <p style="margin-bottom: 55px"><span class="cz">已成功</span></p>
                                        <p>共计
                                            <spa>1</spa>
                                            件商品&nbsp;&nbsp;合计:￥<span>1800</span></p>
                                    </td>
                                </tr>
                                </tbody>
                            </table>

                            <nav class="text-center" aria-label="Page navigation">
                                <ul class="pagination">
                                    <li>
                                        <a href="#" aria-label="Previous">
                                            <span aria-hidden="true">&laquo;</span>
                                        </a>
                                    </li>
                                    <li><a href="#">1</a></li>
                                    <li><a href="#">2</a></li>
                                    <li><a href="#">3</a></li>
                                    <li><a href="#">4</a></li>
                                    <li><a href="#">5</a></li>
                                    <li>
                                        <a href="#" aria-label="Next">
                                            <span aria-hidden="true">&raquo;</span>
                                        </a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                     
                </div>
            </div>
        </div>


    </div>


    <!---->
    <style>
        .modify_head {
            width: 80px;
            height: 80px;
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
            background-color: rgba(0, 0, 0, 0.3);
            text-align: center;
            line-height: 80px;
            color: white;
            font-weight: bold;
            font-size: 16px;
            left: 20px;

            cursor: pointer;
        }

        .modal-content {
            background-color: rgba(0, 0, 0, 0.0);
        }

        .modal-header {
            background-color: white;
            border-radius: 5px;
        }

        .m-left {
            padding-top: 20px;
            margin-right: 45px;
            background-color: white;
            min-height: 600px;
            border-radius: 15px;
        }

        .m-right {
            background-color: white;
            min-height: 600px;
            border-radius: 15px;
        }

        .cl {
            font-size: 16px;
            font-weight: bold;
            margin-top: 20px;

        }

        #img-head {

            position: relative;

        }
        .upload_pic{
            display: block;
            opacity: 0;
            width: 100%;
            height: 100%;




        position: absolute;
            left: 0;
            top: 0;

        }
    </style>
    <!-- Modal -->
    <div class="modal fade bs-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">

                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">个人资料修改</h4>

                </div>

                <div class="modal-body">
                    <div class="row">
                        <div class="m-left col-lg-3 col-xs-3 col-md-3">
                            <div id="img-head">

                                    <span class="modify_head hide"  style="position: absolute;">
                                        修改头像
                                         <input type="file" class="upload_pic" id="upload">
                                    </span>



                                <img class="img-responsive img-circle center-block"
                                     src="/assets/images/Member_center/headicon03.png"
                                     style="width: 80px;height: 80px;"/>
                                <h2 class="center-block text-center">可乐</h2>

                            </div>
                            <div class="cl">
                                <p><span style="font-size: 16px" class="fas fa-user-edit"></span> <span
                                        style="margin-left: 10px"> 个人资料</span></p>
                                <p><span style="font-size: 18px" class="glyphicon glyphicon-off"></span><span
                                        style="margin-left: 15px">注销</span></p>
                            </div>


                        </div>

                        <div class="m-right col-lg-8 col-xs-8 col-md-8">
                            <h4>基本信息</h4>
                            <form class="form-horizontal" >
                                <div class="form-group">
                                    <label for="inputusername" class="col-sm-3 control-label">昵称</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="inputusername" placeholder="请输入你的昵称">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="inputbirthday" class="col-sm-3 control-label">出生日期</label>
                                    <div class="col-sm-8">
                                        <input type="date" class="form-control" id="inputbirthday"
                                               placeholder="请输入你的出生日期" style="line-height: 8px">
                                    </div>
                                </div>
                                <div class="form-group">

                                    <label class="col-sm-3 text-right">性别</label>

                                    <div class="col-sm-8">
                                        <input type="checkbox"> 男 &nbsp; &nbsp; <input type="checkbox"> 女
                                    </div>


                                </div>

                                <div class="form-group">
                                    <label  class="col-sm-3 control-label">家乡</label>
                                    <div class="col-sm-8 form-inline">
                                        <select class="form-control">
                                            <option>中国</option>
                                        </select>
                                        <select class="form-control">
                                            <option>云南</option>
                                        </select>
                                    </div>
                                </div>



                                <div class="form-group">
                                    <label  class="col-sm-3 control-label">现居</label>
                                    <div class="col-sm-8 form-inline">
                                        <select class="form-control">
                                            <option>中国</option>
                                        </select>
                                        <select class="form-control">
                                            <option>云南</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="qm" class="col-sm-3 control-label">签名</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="qm"
                                               placeholder="因为有个性，所有无签名！" >
                                    </div>
                                </div>


                                <div class="form-group">
                                    <label for="jj" class="col-sm-3 control-label">简介</label>
                                    <div class="col-sm-8">
                                        <textarea id="jj" class="form-control" rows="3"></textarea>
                                    </div>
                                </div>


                                <div style="height: 3px;width: 100%;margin-left: 5px;margin-right: 5px;background-color: #EDEDED"></div>
                                <h4>联系方式</h4>
                                <div class="form-group">
                                    <label for="qm" class="col-sm-3 control-label">QQ</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="QQ"
                                               placeholder="请输入你的QQ号！" >
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="qm" class="col-sm-3 control-label">微信</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="weixin"
                                               placeholder="请输入你的微信号！" >
                                    </div>
                                </div>


                                <div class="row">
                                    <div class="col-md-8 col-md-offset-2">
                                        <button class="pull-left btn btn-default" type="button" data-dismiss="modal">关闭</button>
                                        <button class="pull-right btn btn-primary" type="button" >保存</button>

                                    </div>

                                </div>

                            </form>


                        </div>
                    </div>

                </div>


            </div>
        </div>
    </div>
    <!--编辑个人资料  结束-->
</div>

<!--


<div id="content-container" class="container">
    <div class="row">
        <div class="col-md-3">
            {include file="common/sidenav" /}
        </div>
        <div class="col-md-9">
            <div class="panel panel-default ">
                <div class="panel-body">
                    <h2 class="page-header">
                        {:__('User center')}
                        <a href="{:url('user/profile')}" class="btn btn-success pull-right"><i class="fa fa-pencil"></i>
                            {:__('Profile')}</a>
                    </h2>
                    <div class="row user-baseinfo">
                        <div class="col-md-3 col-sm-3 col-xs-2 text-center user-center">
                            <a href="{:url('user/profile')}" title="{:__('Click to edit')}">
                                <span class="avatar-img"><img src="{$user.avatar|cdnurl}" alt=""></span>
                            </a>
                        </div>
                        <div class="col-md-9 col-sm-9 col-xs-10">
                            &lt;!&ndash; Content &ndash;&gt;
                            <div class="ui-content">
                                &lt;!&ndash; Heading &ndash;&gt;
                                <h4><a href="{:url('user/profile')}">{$user.nickname}</a></h4>
                                &lt;!&ndash; Paragraph &ndash;&gt;
                                <p>
                                    <a href="{:url('user/profile')}">
                                        {$user.bio|default=__("This guy hasn't written anything yet")}
                                    </a>
                                </p>
                                &lt;!&ndash; Success &ndash;&gt;
                                <div class="basicinfo">
                                    <div class="row">
                                        <div class="col-xs-4 col-md-2">{:__('Lv')}</div>
                                        <div class="col-xs-8 col-md-4"><a href="javascript:;" class="viewlv">{$user.level}</a>
                                        </div>
                                        <div class="col-xs-4 col-md-2">{:__('Score')}</div>
                                        <div class="col-xs-8 col-md-4"><a href="javascript:;" class="viewscore">{$user.score}</a>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-xs-4 col-md-2">{:__('Successions')}</div>
                                        <div class="col-xs-8 col-md-4">{$user.successions} {:__('Day')}</div>
                                        <div class="col-xs-4 col-md-2">{:__('Maxsuccessions')}</div>
                                        <div class="col-xs-8 col-md-4">{$user.maxsuccessions} {:__('Day')}</div>
                                    </div>
                                    <div class="row">
                                        <div class="col-xs-4 col-md-2">{:__('Logintime')}</div>
                                        <div class="col-xs-8 col-md-4">{$user.logintime|date="Y-m-d H:i:s",###}</div>
                                        <div class="col-xs-4 col-md-2">{:__('Prevtime')}</div>
                                        <div class="col-xs-8 col-md-4">{$user.prevtime|date="Y-m-d H:i:s",###}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>-->
